<template>
  <div class="change_data">

    <van-field :rows="1" type="textarea" autocomplete="off" v-model="value" readonly name="phone" :label="txt_tip"
      :placeholder="txt_tip" @click-input="show = true" :rules="[{ required: true, message: `请选择部门` }]" />
    <van-popup v-model="show" round position="bottom" get-container="#app">
      <van-cascader v-model="cascaderValue" title="请选择部门" :options="options" :closeable="false" @change="getValue"
        :field-names="fieldNames" />
    </van-popup>
  </div>
</template>

<script>
  // import {
  //   DeptService
  // } from "@/api";
  export default {
    model: {
      prop: 'dept_id',
      event: 'change',
    },
    props: {
      src_value:{
        type: String,
        default: ''
      },
      dept_id: {
        type: [Number,String, Array],
        default: ''
      },
      is_array: {
        type: Boolean,

        default: false
      },
      txt_tip: {
        type: String,
        default: '',
      },
      options: {
        type: Array,
        default:()=>[]
      },
      fieldNames: {
        type:Object,
        default:()=>{}
      }
    },
    mounted() {
      this.value = this.src_value
    },
    methods: {

      getValue(val) {
        console.log(val);
        this.$emit('change', this.is_array ? [val.value] :val.value);
        this.value = val.selectedOptions.reduce((result, item, index) => {
          if (index == 0) {
            return item[this.fieldNames.text]
          } else {
            return result + '/' + item[this.fieldNames.text]
          }
        }, '')
      }
    },
    name: 'dept_search',
    watch: {
      dept_id(newValue) {
        this.cascaderValue = typeof newValue == 'object' ? newValue[0] : newValue
        if( (typeof newValue == 'object' &&  this._.isEmpty(newValue) )|| !newValue){
          this.value = ''
        }
      },

    },
    computed: {
      show_value() {
        return this.value 
      }
    },
    data() {
      return {
        show: false,
        cascaderValue: '',
        value: '',
        
      };
    },
  }
</script>

<style lang="less" scoped>
  /deep/.van-field--min-height{
    min-height: 40px;
  }
  /deep/.van-field__control{
    min-height: 50px;
  }
  .change_data {
    font-size: 28px;
    margin-top: 25px;
    margin-right: 25px;
    line-height: 50px;
    border-radius: 16px;
    padding: 0 20px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon_size {
      width: 26px;
      height: 26px;
      margin-right: 12px;
    }
  }
</style>